<template>
  <div class="showQuestion">
    <!-- 大图标展示网站主要功能-->
    <div class="card">
      <div v-for="item in card_list" key="item.id">
        <el-card style="width:240px; margin: 3px;" shadow="hover">
            <template #header>
              <div class="card-header">
                <p style="color: coral; font-size: large;">{{ item.title }}</p>
              </div>
            </template>
            <div class="courseBody">
              <div class="courseCover">
                <el-image style="width: 100px; height: 141px; cursor:pointer" :src="item.icon_src" fit="fill" @click="handleImageClick(item.route)" 
                :zoom-rate="1.2"
                :max-scale="7"
                :min-scale="0.2"
                />
              </div>
                <div class="courseContent" v-if="item.id==1||item.id==2"> 
                  <p>可组卷成</p>
                  <span style="color:chocolate;">导学案</span>
                  <span style="color:chartreuse;">练习卷</span>
                  <span style="color:darkgreen;">测试卷</span>                 
                </div>
                <div class="courseContent" v-if="item.id==3"> 
                  <p>让你拥有</p>
                  <span style="color:chocolate;">教科书的排版</span>                 
                </div>
                <div class="courseContent" v-if="item.id==4"> 
                  <p>liveTex服务器</p>
                  <span style="color:chocolate;">字体齐全</span>                 
                </div>
                <div class="courseContent" v-if="item.id==5"> 
                  <p>在线识别</p>
                  <span style="color:darkgreen;">超级精准</span>
                </div>
                <div class="courseContent" v-if="item.id==6"> 
                  <p>私人题库</p>
                  <span style="color:chocolate;">多人协作</span>
                  <span style="color:darkgreen;">自由组卷</span>
                </div>
            </div>                
          </el-card>
        </div>
    </div>
    <!-- 用卡片展示题目 -->
    <div  class="questionsBody" id="questionsBodyRef" v-if="state.is_icon==false"></div>    
      <div v-for="item in state.questionList" :key="item.id">
        <el-card class="box-card">
            <template #header>
                <div class="card-header">
                  <span>知识点:
                      <block v-for="(item_knowledge,index) in item.knowledgepoint" :key="index">
                        {{ item_knowledge.name }};
                      </block>                      
                  </span>
                    <span>题型：{{item.type_cn}}</span>
                    <!-- <el-row>
                      <span>难度
                        <el-rate v-model="item.difficulty_level" disabled size="small" :texts="['入门', '容易', '较难', '很难', '压轴']"/>
                      </span>
                    </el-row> -->
                    <span>创建者：{{ item.owner_info.nickname }}</span>
                    <span>日期：{{ item.publish_time }}</span>
                    <span>来源：{{ item.reference }}</span>
                    <span>{{ item.bank_point }}库币</span>
                    <div class="operateButton">                                
                      <el-tooltip class="box-item" effect="dark" content="查看详情" placement="top">
                        <el-button :icon="View" size="small" @click="viewDetail(item)" ></el-button>
                      </el-tooltip>                     
                     
                    </div>
                  </div>
          </template> 
          <div class="card_content">
              <div v-html="item.content" class="line-break"></div>
          </div>
        </el-card>
      </div>
  </div>
  
  <ViewQuestionDetail ref="viewQuestionDetail" :question="state.question"></ViewQuestionDetail>
</template>

<script setup>
  import { reactive, ref, onMounted, getCurrentInstance } from 'vue'
  import axios from '@/utils/axios'
  import { useRoute, useRouter } from 'vue-router'
  import ViewQuestionDetail from '@/views/ViewQuestionDetail.vue'
  import { View, Plus, Promotion, QuestionFilled, EditPen,  Star, StarFilled } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  import { useStore } from 'vuex'
  import { localGet, localSet, deepClone } from '@/utils'
  // 通过结构，获得appContext变量
  const { appContext } = getCurrentInstance()
  // 获得全局上下文后， 得到$bus事件总线
  const eventBus = appContext.config.globalProperties.$bus
  // （发布）触发本注册的事件:即清空tree组件选中复选框状态
  const card_list = [
    {id: 1, title: '按章节找试题', route: '/getQuestionsByCourse?id=1', icon_src:'https://czsx.xxjstk.top/static/avatar/book.png'},
    {id: 2, title: '按试卷找试题', route: '/getQuestionsByPaper', icon_src:'https://czsx.xxjstk.top/static/avatar/book1.png'},
    {id: 3, title: '找导学案', route: '/getGuidePapersByKnowledgepoint', icon_src:'https://czsx.xxjstk.top/static/avatar/book2.png'},    
    {id: 4, title: 'tex渲染pdf', route: '/tex2pdf', icon_src:'https://czsx.xxjstk.top/static/avatar/book3.png'},
    {id: 5, title: 'latex识别', route: '/handingWriteOCR', icon_src:'https://czsx.xxjstk.top/static/avatar/book4.png'},
    {id: 6, title: '校本题库', route: '/userCenter/addNode', icon_src:'https://czsx.xxjstk.top/static/avatar/book5.png'},
  ]
  const store=useStore()
  const viewQuestionDetail = ref()
	const select_order_number = ref('') //表格select选中的条数
  const select_orderId = ref([]) //表格select复选框选中的id
  const multipleSelection = ref([])
  const route = useRoute()
  const router = useRouter()
  // 变量
  const state = reactive({
    chapter_icon_src: '',
    paper_iocn_src:'',
    is_icon: false,  //显示大图标
    questionList: [], // 数据列表   
    question: null,
    question_detail: Object,
  })
  // 初始化
  onMounted(()=>{
    // getAllQuestions()
  })
  // 点击卡片挑战到对应的页面
  const handleImageClick=(route)=>{
    console.log('挑战路由：', route)
    router.push(route)
  }
  // 回到页面顶部
  const scrollToTop=()=>{
    document.querySelector('#questionsBodyRef').scrollIntoView(true);
  }
  // 获取章节目录搜索到所有题目
  const getAllQuestions=()=>{  
    const no_authCache = localGet('no_authCache')
  const no_authCacheStartTime = localGet('no_authCacheStartTime')
  const currentDate = new Date();
  if(no_authCache !=undefined && no_authCacheStartTime!=undefined){    
    const dateDiff = currentDate.getDate() - no_authCacheStartTime // 获取两个时间的差值（以秒为单位）
    if(dateDiff <= 1){
      if(no_authCache!=[]){
        state.questionList = no_authCache
        return 1
      }
    }
  }
    axios.get("/questions/no_auth/").then(res => {
      // console.log("获取首页数据结果为：",res)
      if (res.code==200){
        // console.log("列表题目：",res)
        state.questionList = res.data.results
        localSet('no_authCache', deepClone(res.data.results))
        localSet('no_authCacheStartTime', currentDate.getDate())
        scrollToTop()
      }else{
        ElMessage("获取题目失败")
        console.log("获取题目失败：",res)
      }
    })
    .catch((error)=>{
      console.log("获取目录题目错误：", error)
    })   
  } 

  //查看单个题目详情
  const viewDetail = (item)=>{
    state.question = item
    viewQuestionDetail.value.open(item)
  }
</script>
<style scoped>
html, body {
	width: 100%;
	height: 100%;
}
.showQuestion{
  display: flex;
  flex-direction: column;;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: flex-end;
  font-size: 12px;
  margin: 1;
  padding: 1;
}
  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    margin: 0;
    padding: 0;
    height: 20px;
  }
  .card_content {
    display: flex;
    flex-flow: column wrap;
    margin: 0px;
    padding: 0px;
  }

  .box-card {
    display: flex;
    flex-flow: column wrap;
    align-items: stretch;
    height: auto;
    width: 100%;
    overflow-y: auto;
  }
  .line-break{
  white-space: pre-wrap;
  width: 950px;
  font-size: 12px;
  }
  img{
      display:block;
  }
  .questionsBody{
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    overflow-y: auto;
    margin: 0;
    padding: 0;
  }
  .operateButton{
    padding: 0;
    margin: 0;
    display: flex;
    flex-flow: row nowrap;
  }
  .courseBody{
  display: flex;
  flex-direction: row;
  margin: 2px;
}
.courseContent{
  display: flex;
  flex-direction: column;
  padding:2px;
  font-size: smaller;
}
.card{
  display: flex;
  flex-wrap: wrap; 
  margin: 5px;
}
.card-item{
  width: 300px;
  margin: 5px;
  padding: 3px;
}
.invite {
  width:500px;
  display: flex;
  flex-flow:row, wrap;
  justify-content: space-between;
  align-items: center;
  /* margin: 5px;   */
}
.invite-right {
  width: 150px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2px;
  margin: 5px;
}
.invite-item {
  display: flex;
  flex-flow: row, nowrap;
  margin: 6px;
  padding: 5px;
  justify-content: center;
  align-items: center;
}
.invite-left {
  width: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 5px;
}
.courseCover {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
</style>